<template>
    <section>
        <div style="height: 50px;">
            <el-button type="primary" style="margin-right:10px;float:right" @click="addRule">添加</el-button>
            <div class="clear"></div>
        </div>
        <!--表格-->
        <el-table
        :data="tableData.slice((currentPage - 1) * 10, currentPage * 10)"
        border
        style="width: 100%">
        <el-table-column
            prop="name"
            label="名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="type"
            label="触发时机"
            width="180" :formatter="formatType">
        </el-table-column>
        <el-table-column
            prop="pushType"
            label="消息类型"
            width="180" :formatter="formatPushType">
        </el-table-column>
        <el-table-column label="是否启用">
            <template scope="scope">
               <el-switch v-model="scope.row.enable" @change="changeRuleEnable(scope.row)" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#dcdfe6"></el-switch>
            </template>  
        </el-table-column>
        <el-table-column label="">
            <template scope="scope">
              <el-button type="primary" size="small" @click="editPushRule(scope.$index, scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="deletePushRule(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="tableData.length">
        </el-pagination>
        </div>
    <push-edit 
    :visible.sync="pushEditVisible"
    :operation="operation"
    :pushRule="pushRule" 
    @confirm="comfirmPushEdit">
    </push-edit>
    </section>
</template>
<script>
import { productService } from '@/services';
import pushEdit from '@/views/product/pushEdit';
export default {
    data () {
        return {
            tableData:[],
            currentPage:1,
            pushEditVisible:false,
            operation:'add',
            pushRule:{},
        };
    },
    props:{
        prodKey:{
            type: String
        }
    },
    components:{ pushEdit},
    activated () {
       this.getPushRuleList();
    },
    methods:{
         async getPushRuleList () {
            try {
                this.tableData = await productService.getPushRuleList(this.prodKey);

            }catch (e) {

            }
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            if (process.env.NODE_ENV !== 'production') {
            // eslint-disable-next-line
                console.log(`当前页: ${val}`);
            }
        },
        addRule () {
            this.pushRule = {'timeInterval':0};
            this.operation = 'add';
            this.pushEditVisible = true;
        },
        editPushRule (index, row) {
            this.pushRule = Object.assign({},row);
            this.operation = 'update';
            this.pushEditVisible = true;
        },
        deletePushRule (index, row) {

        },
        formatType(row, column) {
            switch (row.type) {
                case 0:
                return '设备上报时';
                case 1:
                return '设备登录时';
                case 2:
                return '设备离线时';
                default:
                return '未知';
            }
        },
        formatPushType(row, column) {
            switch (row.pushType) {
                case 0:
                return '提示';
                case 1:
                return '告警';
                default:
                return '未知';
            }
        },
        changeRuleEnable (row) {
            console.log(row);
        },
        async comfirmPushEdit () {
           this.pushEditVisible = false;
           this.getPushRuleList();
        }
    }
}
</script>